<template>
	<view class="main">
		<view v-for="(item, i) in seasons" :key="i">
			<view class="season-warp" :class="item._season + '-warp'" @click="open(i)">
				<view class="warp-title-inner">
					<view class="warp-title-text">{{ item.season_tag }}</view>
					<view class="warp-title-tail">{{ item.tail }}</view>
				</view>
			</view>
			<view class="collapse-box" :class="{'collapse-active' : item.open}">
				<view class="wrap" v-for="(inner_item, idx) in item.subList" :key="idx">
					<view class="collapse-item right-btn">
						<div class="title">{{ inner_item.title }}</div>
						<view class="tip" @click="linkClass(item.season_tag, inner_item)">{{ inner_item.note }}<i class="icon iconfanhui"></i></view>
					</view>
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data () {
			return {
				seasons : [
					{
						season_tag: '春季班',
						_season: 'spring',
						tail: '上课时段范围3月-6月',
						open: false,
						subList: [
							{
								title: '基础班',
								note: '适合基础薄弱的学生',
								level_tag: 1
							},
							{
								title: '提高班',
								note: '适合基础很好的学生强化学习',
								level_tag: 2
							},
							{
								title: '精讲班',
								note: '适合需要考前冲刺学习的学生',
								level_tag: 3
							},
							{
								title: 'VIP 1对3',
								note: '老师1对3教学',
								level_tag: 4
							},
							{
								title: 'VIP 1对1',
								note: '老师1对1教学',
								level_tag: 5
							}
						]
					},
					{
						season_tag: '秋季班',
						_season: 'summer',
						tail: '上课时段范围9月-12月',
						open: false,
						subList: [{
								title: '基础班',
								note: '适合基础薄弱的学生',
								level_tag: 1
							},
							{
								title: '提高班',
								note: '适合基础很好的学生强化学习',
								level_tag: 2
							},
							{
								title: '精讲班',
								note: '适合需要考前冲刺学习的学生',
								level_tag: 3
							},
							{
								title: 'VIP 1对3',
								note: '老师1对3教学',
								level_tag: 4
							},
							{
								title: 'VIP 1对1',
								note: '老师1对1教学',
								level_tag: 5
							}
						]
					},
					{
						season_tag: '暑假班',
						_season: 'autumn',
						tail: '上课时段范围7月-8月',
						open: false,
						subList: [{
								title: '基础班',
								note: '适合基础薄弱的学生',
								level_tag: 1
							},
							{
								title: '提高班',
								note: '适合基础很好的学生强化学习',
								level_tag: 2
							},
							{
								title: '精讲班',
								note: '适合需要考前冲刺学习的学生',
								level_tag: 3
							},
							{
								title: 'VIP 1对3',
								note: '老师1对3教学',
								level_tag: 4
							},
							{
								title: 'VIP 1对1',
								note: '老师1对1教学',
								level_tag: 5
							}
						]
					},
					{
						season_tag: '寒假班',
						_season: 'winter',
						tail: '上课时段范围1月-2月',
						open: false,
						subList: [{
								title: '基础班',
								note: '适合基础薄弱的学生',
								level_tag: 1
							},
							{
								title: '提高班',
								note: '适合基础很好的学生强化学习',
								level_tag: 2
							},
							{
								title: '精讲班',
								note: '适合需要考前冲刺学习的学生',
								level_tag: 3
							},
							{
								title: 'VIP 1对3',
								note: '老师1对3教学',
								level_tag: 4
							},
							{
								title: 'VIP 1对1',
								note: '老师1对1教学',
								level_tag: 5
							}
						]
					}
				]
			}
		},
		onLoad() {
			var _vm = this;
		},
		methods: {
			// 跳转
			linkClass(seasons_tag, item) {
				uni.navigateTo({
					url: `free-lesson?kind=2&season_tag=${seasons_tag}&level_tag=${item.level_tag}&title=${seasons_tag + item.title}`
				})
			},
			open (i) {
				console.log(i)
				var _temp_season = this.seasons[i];
				_temp_season.open = !_temp_season.open;
				this.$set(this.seasons, i, _temp_season);
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/font_lesson/iconfont.css';
	page{background: #F7F7F7;}
	.icon {font-family: iconfont; font-style: normal;color: #ccc;}
	.iconfanhui {display: inline;font-size: 20upx;}
	
	.season-warp{width: auto; margin: 30upx; border-radius: 20upx; height: 150upx;box-shadow: 0 5px 30upx #ddd;background: #fff;z-index: 100;}
	.spring-warp{background-image: url('../../static/image/lesson-spring-banner.png'); background-position: right; background-size: cover;}
	.summer-warp{background-image: url('../../static/image/lesson-summer-banner.png'); background-position: right; background-size: cover;}
	.autumn-warp{background-image: url('../../static/image/lesson-autumn-banner.png'); background-position: right; background-size: cover;}
	.winter-warp{background-image: url('../../static/image/lesson-winter-banner.png'); background-position: right; background-size: cover;}
	.season-warp .warp-title-inner{flex: 1;overflow: hidden;display: flex;flex-direction: column;justify-content: center; margin: 0 20upx;height: 100%;}
	.season-warp .warp-title-text{font-size: 36upx;text-overflow: ellipsis;white-space: nowrap;color: #333;font-weight: 500;line-height: 1.5;overflow: hidden}
	.season-warp .warp-title-tail{font-size: 24upx;font-weight:400;color: #666;}
	
	.wrap{padding:20upx 30upx 20upx 30upx; border-radius: 20upx; background: #FFFFFF; white-space:normal;width: auto; margin: 0 30upx 5upx;}
	
	
	.collapse-box{transition: all 0.3s ease 0s;height: 0;transform: translateY(-50%);z-index: 1; opacity: 0;overflow: hidden;}
	.collapse-active{transform: translateY(0); height: auto; opacity: 1;}
	
	.collapse-item{display: inline-flex;justify-content: space-between;width: 100%;height: 54upx;background: #fff; align-items: center;}
	.collapse-item .right-btn{margin-left: 6upx; display: inline;}
	.collapse-item .title{font-size:30upx;font-family:Source Han Sans CN;font-weight:500;color: #333333;}
	.collapse-item .tip{font-size:12px;font-family:Source Han Sans CN;font-weight:400;color: #999999;}
	.collapse-item .tip .icon {vertical-align: baseline;margin-left: 20upx;}
	
	.teacher-info{display:flex;}
	.avatar{border-radius: 50%; width:80upx; height:80upx; overflow: hidden;}
	.avatar .pic{width:100%; height:100%; background:rgba(130,255,221,0.7);}
	
	.summary{display: flex; flex-direction:column; margin-left:10upx;}
	.summary .name{height:32upx; font-size:32upx; font-weight: bold; color:#333;}
	.summary .grade{height:26upx; margin-top: 5px; font-size:26upx; color:#999;}
	
	.personality{display:flex; margin-top: 26upx; color:#666; font-size:26upx; line-height: 42upx; letter-spacing: 2upx;}
</style>
